<template>
  <div>
    <h1 @click="back()">&lt;</h1>
    <!-- watch -->
    <h1>{{ text }}</h1>
    <button @click="fun()">点我修改</button>
    <hr />
    <!-- 逆向传值 -->
    <Zi @chuan="fudata" />
    <hr />
    <Zi ref="cz" />
    <button @click="fun1()">点我ref传值</button>
    <!-- ref -->

    <hr />
    <!-- 同胞传值 -->
    <Za />
    <Zb />
    <!-- 路由独享守卫 -->
    <!-- mixin -->
    <hr />
    <h4>混入</h4>
    <button @click="diaoyong()">点我调用混入的方法</button>
    <hr />
    <h5>$set</h5>
    <h1>姓名:{{ obj.name }}</h1>
    <h2>年龄:{{ obj.age }}</h2>
    <button @click="updata">点击添加新内容</button>
    <hr />
    <!-- 自定义指令 -->
    <h1 v-xiaoming>This is an about page</h1>
    <hr />
    <h4>按键修饰符</h4>
    <input type="text" @keydown.space="func()" value="空格" />
    <hr />
    <h4>keep-alive</h4>
    <div>
      <button @click="fun8('One')">点我去one</button>
      <button @click="fun8('Two')">点我去two</button>
      <button @click="fun8('Three')">点我去three</button>
      <keep-alive include="One">
        <component :is="com"></component>
      </keep-alive>
    </div>
    <hr />
    <h4>插槽</h4>
    <Zi>
      <h1 slot="xt">hahahahahahah</h1>
    </Zi>
  </div>
</template>

<script>
import Zi from "./zi.vue";
import Za from "../../components/zia.vue";
import Zb from "../../components/zib.vue";
import One from "../../components/one.vue";
import Two from "../../components/two.vue";
import Three from "../../components/three.vue";
import { demo } from "@/mixins";

export default {
  components: {
    Zi,
    Za,
    Zb,
    One,
    Two,
    Three,
  },
  mixins: [demo],

  methods: {
    fun() {
      this.text = "haha";
    },
    fun8(data1) {
      this.com = data1;
    },
    fudata(val) {
      console.log(val);
    },
    back() {
      this.$router.go(-1);
    },
    fun1() {
      console.log(this.$refs.cz.zitext);
    },
    updata() {
      this.$set(this.obj, "age", 20);
      //   this.obj.age = 18;
      console.log(this.obj.age);
    },
    func() {
      console.log("空格被按下了");
    },
  },
  data() {
    return {
      text: "你好",
      obj: {
        name: "xt",
      },
      com: "Three",
    };
  },
  directives: {
    xiaoming: {
      inserted(el) {
        el.style.color = "blue";
      },
    },
  },
  watch: {
    text(haha) {
      console.log(haha);
    },
  },
};
</script>

<style>
</style>